<template>
  <div class="main">
    <div ref="editor" class="main__left" ></div>
    <pre class="main__right">
      <code class="language-html" ref="tsInterface" v-html="resultStr"></code>
    </pre>
    <button @click="handleClick" class="main__fbutton"></button>
  </div> 
</template>

<script setup>
import JSONEditor from 'jsoneditor'
import json2TS from 'json-to-ts'
import { ref, onMounted } from 'vue'
import * as  prettier from 'prettier/standalone.mjs'
import * as esTreePlugin from 'prettier/plugins/estree'
import * as typescriptPlugin from 'prettier/plugins/typescript.mjs'
import hljs from 'highlight.js';
import json from 'highlight.js/lib/languages/json.js';
import typescript from 'highlight.js/lib/languages/typescript.js'
import {  message } from 'ant-design-vue';
hljs.registerLanguage('json', json);
hljs.registerLanguage('typescript', typescript);

const editor = ref(null)
const resultStr = ref('')
const tsInterface = ref(null)
const demoJson = {
  "Array": [1, 2, 3],
  "Boolean": true,
  "Null": null,
  "Number": 123,
  "Object": {"a": "b", "c": "d"},
  "String": "Hello World"
};
const jsonStr = ref(JSON.stringify(demoJson))
onMounted(async () => {
  const editorIns = new JSONEditor(editor.value, {
    mode: 'code',
    onChangeText(e){
      jsonStr.value = e
      try {
        toTypeScript()
      }catch(error) {
        console.log(error)
      }
    }
  })
  editorIns.set(JSON.parse(jsonStr.value))
  toTypeScript()
})
async function toTypeScript() {
  let formatCode = json2TS( JSON.parse(jsonStr.value))
  formatCode = await prettier.format(formatCode.join(''), {
    parser: "typescript",
    plugins: [esTreePlugin,typescriptPlugin],
  })
  formatCode = hljs.highlight(
    formatCode,
    { language: 'typescript' }
  ).value
  resultStr.value = formatCode
}
const handleClick = async () => {
  const text = tsInterface.value.innerText
  await navigator.clipboard.writeText(text)
  message.success('复制成功')
  // window.copyText?.(text)
  // window.showNotification?.('复制成功')

}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  font-size: 14px;
  width: 100%;
  &__left,
  &__right {
    height: 100vh;
    overflow: auto;
    width: 50%;
    padding: 12px;
    position: relative;
    box-sizing: border-box;
    margin: 0;
  }
  &__left {
    padding: 0px;
  }
  &__fbutton {
    all: unset;
    position: fixed;
    right: 10px;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
    bottom: 100px;
    background-image: url("@/assets/copy.png");
    width: 50px;
    height: 50px;
    z-index: 99;
    background-color: #3883fa;
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50%;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
